<template>
  <div class="container-fluid">
    <ol class="breadcrumb">
      <li><a @click="changeModel('read')"><span class="glyphicon glyphicon-map-marker" v-if = "model == 'read'"></span>查看模式</a></li>
      <li><a @click="changeModel('edit')"><span class="glyphicon glyphicon-map-marker" v-if = "model == 'edit'"></span>修改模式</a></li>
    </ol>
    <div class="read-model" v-if = "model == 'read'">
      <TaskList></TaskList>
    </div>

    <div class="insert-model" v-if="model=='edit'">
      <TaskEdit></TaskEdit>
    </div>


  </div>
</template>

<script>
  import TaskEdit from './TaskEdit'
  import TaskList from './TaskList'

  export default {
    name: "Task",
    components : {
      TaskEdit,
      TaskList
    },
    methods : {
      changeModel (model) {
        if (!model || this.mode == model) return
        this.model = model
      }
    },
    data () {
      return {
        model : 'read',
      }
    }

  }
</script>

<style scoped>

</style>
